<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Navs example</title>

    <!-- Photon.css -->
    <link rel="stylesheet" href="/dist/css/photon.css">

    <style>
      .sidebar {
        background-color: #f5f5f4;
      }
    </style>
  </head>
  <body>
    <div class="window">
      <div class="window-content">
        <div class="pane-group">
          <div class="pane pane-sm sidebar">
            <nav class="nav-group">
              <h5 class="nav-group-title">Favorites</h5>
              <a class="nav-group-item active">
                <span class="icon icon-home"></span>
                connors
              </a>
              <span class="nav-group-item">
                <span class="icon icon-download"></span>
                Downloads
              </span>
              <span class="nav-group-item">
                <span class="icon icon-folder"></span>
                Documents
              </span>
              <span class="nav-group-item">
                <span class="icon icon-signal"></span>
                AirPlay
              </span>
              <span class="nav-group-item">
                <span class="icon icon-print"></span>
                Applications
              </span>
              <span class="nav-group-item">
                <span class="icon icon-cloud"></span>
                Desktop
              </span>
            </nav>


            <nav class="nav-group">
              <h5 class="nav-group-title">Tags</h5>
              <span class="nav-group-item" href="#">
                <span class="icon icon-record" style="color:#fc605b"></span>
                Red
              </span>
              <span class="nav-group-item" href="#">
                <span class="icon icon-record" style="color:#fdbc40"></span>
                Orange
              </span>
              <span class="nav-group-item" href="#">
                <span class="icon icon-record" style="color:#34c84a"></span>
                Green
              </span>
              <span class="nav-group-item" href="#">
                <span class="icon icon-record" style="color:#57acf5"></span>
                Blue
              </span>
            </nav>
            <nav class="nav-group">
              <h5 class="nav-group-title">Devices</h5>
              <span class="nav-group-item">
                <span class="icon icon-drive"></span>
                Backup disk
              </span>
              <span class="nav-group-item">
                <span class="icon icon-drive"></span>
                Backup disk
              </span>
              <span class="nav-group-item">
                <span class="icon icon-drive"></span>
                Backup disk
              </span>
              <span class="nav-group-item">
                <span class="icon icon-drive"></span>
                Backup disk
              </span>
            </nav>
          </div>
          <div class="pane">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
